<template>
	<view class="log">
		<view class="btns">
			<CustomButton text="clean" @click="debugStore.clean()" backgroundColor="#f56c6c" />
			<CustomButton text="update" @click="debugStore.update()" backgroundColor="#409eff" />
		</view>
		<view class="list" v-if="debugStore.list.length">
			<view class="item" v-for="(item, index) in debugStore.list" :key="index">
				<view class="txt t1"><span class="txt">Label: </span>{{item.label}}</view>
				<view class="txt">
					<span class="txt">Type: </span>{{item.type}}
					<span class="txt">Time: </span>{{item.time}}
				</view>
				<view class="txt">{{showObj(item.value)}}</view>
			</view>
		</view>

	</view>
</template>

<script setup>
import CustomButton from '@/components/CustomButton.vue'
	// import AppContext from '../../scripts/AppContext';
	// import { Log } from '../../scripts/pages/Log/Log';
	import { useDebugStore } from '@/stores/debug'
	import { onMounted, ref } from 'vue'
	const debugStore = useDebugStore()
	debugStore.add('测试', { foo: 'bar' })
	console.log(debugStore)
	// const app = AppContext.getContext().getPage(Log)
	// console.log("app", app)
	
	onMounted(()=>{
		console.log("start")
		// app.update()
	})
	
	function showObj(item){
		if(typeof item == "string"){
			return item
		}
		return JSON.stringify(item)
	}
</script>

<style scoped lang="scss">
	.log {
		margin: 30rpx;
	}

	.btns {
		display: flex;
		margin: 20rpx auto;
		gap: 20rpx;
	}

	.list {
		font-size: 24rpx;
		color: #999;
		padding: 20rpx 0;
		.item {
			border-bottom: solid 1px #f0f0f0;
			margin: 20rpx;
			display: flex;
			flex-direction: column;
			gap: 10rpx;
		}
		.txt{
			font-family: serif !important;
			word-break: break-all;
		}
		.t1{
			color: #0033ff;
		}
	}
	
</style>